<script setup lang="ts">
import { computed, onMounted, ref, unref } from 'vue';
import { useElementSize, useEventListener } from '@vueuse/core'

const videoRef = ref<HTMLVideoElement>(),
  canvasRef = ref<HTMLCanvasElement>()

const { width, height } = useElementSize(videoRef);
const recorder = ref<MediaRecorder>()
let mediaSteam: MediaStream
const recorderLoading = ref(false),
  recordering = ref(false)
const startRecordDesc = computed(() => {
  if (!recorder.value) return "录制"
  return recordering.value ? "暂停" : "继续"
})


let requestAnimationFrameId: number
function reqLoop(delta?: number) {
  console.log(delta);

  const rc = (recorder).value
  if (rc?.state === 'recording') {
    rc.requestData()
  }
  requestAnimationFrameId = requestAnimationFrame((n) => reqLoop(n))
}
const recordStateChange = () => {
  recorderLoading.value = true
  const rc = unref(recorder)
  if (!rc) {
    const rc = new MediaRecorder(mediaSteam)
    recorder.value = rc
    rc.start()
    reqLoop()
    return
  }
  if (rc?.state === 'paused') {
    reqLoop()
    rc.resume()
  } else {
    rc.pause()
  }

}
function recorderStop() {
  recorder.value?.stop()

}

useEventListener(recorder, "dataavailable", (e: BlobEvent) => {
  if (e.data.size) {
    console.log(e.data);

  }
  recorderLoading.value = false
  recordering.value = true
})
useEventListener(recorder, "start", e => {
  console.log(e);
  recorderLoading.value = false
  recordering.value = true
})
useEventListener(recorder, "stop", e => {
  cancelAnimationFrame(requestAnimationFrameId)
  console.log(e);
  recorderLoading.value = false
  recordering.value = false
  recorder.value = void 0;
})
useEventListener(recorder, "pause", e => {
  cancelAnimationFrame(requestAnimationFrameId)
  console.log(e);
  recorderLoading.value = false
  recordering.value = false
})
useEventListener(videoRef, 'loadedmedia', (e) => {
  console.log(e);
})
useEventListener(videoRef, 'error', (e) => {
  console.log(e);

})
onMounted(() => {
  const videoEle = unref(videoRef)!
  console.log(navigator.mediaDevices.getSupportedConstraints());
  navigator.mediaDevices.enumerateDevices().then((d) => {
    console.log(d);

  })

  navigator.mediaDevices.getUserMedia({
    video: {
      width: { ideal: unref(width) },
      height: { ideal: unref(height) },
    }, audio: false,
  }).then((stream) => {
    videoEle.srcObject = stream;
    videoEle.play()
    mediaSteam = stream
    stream.getVideoTracks().forEach(i => {
      console.log(i.getCapabilities());
      console.log(i.getConstraints());
      console.log(i.getSettings());

    })



  });

})

</script>

<template>
  <video controls autoplay playsinline class="w-full h-full" ref="videoRef"></video>
  <canvas class="w-full h-full" ref="canvasRef"></canvas>
  <div class="absolute right-0 top-0 flex flex-col opacity-50 rounded">
    <div class=" min-w-max gap-4 flex">
      <button v-if="!!recorder" :disabled="recorderLoading" @click="recorderStop">结束</button>
      <button :disabled="recorderLoading" @click="recordStateChange">{{ startRecordDesc }}</button>
    </div>
  </div>
</template>

<style scoped></style>
